<template>
  <div class="filter">
    <div class="filter-item">
      <label for="">教练姓名：</label>
      <Input v-model="coachName" placeholder="请输入" style="width: 300px" />
    </div>
    <div class="filter-item">
      <label for="">性别：</label>
      <Select v-model="coachSex" style="width: 200px" clearable>
        <Option v-for="item in sexList" :value="item.value" :key="item.value">{{
          item.label
        }}</Option>
      </Select>
    </div>
    <div class="filter-item">
      <label for="">电话：</label>
      <Input v-model="coachPhone" placeholder="请输入" style="width: 300px" />
    </div>
    <div class="filter-item">
      <Button type="info" @click="getCoachPage">查询</Button>
    </div>
    <div class="filter-item">
      <Button type="success" @click="showAddModal">新增</Button>
    </div>
    <div class="filter-item">
      <div class="table">
        <Table
          border
          :columns="coachColumns"
          :data="coachList"
          width="1150"
        ></Table>
      </div>
      <div class="page">
        <Page :total="total" show-elevator show-total @on-change="pageChange" />
      </div>
    </div>
    <Modal v-model="detailModal" :title="title" width="1100">
      <detail ref="detail" />
    </Modal>
    <Modal
      title="新增教练"
      width="500"
      v-model="addModal"
      @on-close="closeAddModal"
    >
      <div class="filter">
        <div class="filter-item">
          <label for="">教练姓名：</label>
          <Input
            v-model="addCoachName"
            placeholder="请输入姓名"
            style="width: 200px"
          />
        </div>
        <div class="filter-item">
          <label for="">教练性别：</label>
          <Select v-model="addCoachSex" style="width: 200px" clearable>
            <Option
              v-for="item in sexList"
              :value="item.value"
              :key="item.value"
              >{{ item.label }}</Option
            >
          </Select>
        </div>
        <div class="filter-item">
          <label for="">教练电话：</label>
          <Input
            v-model="addCoachPhone"
            placeholder="请输入电话"
            style="width: 200px"
            :maxlength="11"
            show-word-limit
          />
        </div>
      </div>
      <div slot="footer">
        <Button type="primary" @click="closeAddModal">取消</Button>
        <Button type="primary" @click="addCoach">新增</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import detail from "./moudle/coachCourseDetail.vue";
import axios from "axios";
export default {
  name: "vipList",
  components: { detail },
  data() {
    return {
      total: 0,
      title: "",
      sexList: [
        {
          label: "男",
          value: "男",
        },
        {
          label: "女",
          value: "女",
        },
      ],
      coachColumns: [
        {
          type: "index",
          title: "序号",
          width: 100,
        },
        {
          title: "姓名",
          key: "coachName",
          align: "center",
        },
        {
          title: "性别",
          key: "coachSex",
          align: "center",
        },
        {
          title: "电话号码",
          key: "coachPhone",
          align: "center",
        },
        {
          title: "操作",
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "info",
                    size: "small",
                  },
                  style: {
                    marginLeft: "5px",
                  },
                  on: {
                    click: () => {
                      this.$refs.detail.coachId = params.row.coachId;
                      this.title = params.row.coachName;
                      this.$refs.detail.getCoachCourse();
                      this.showDetailModal();
                    },
                  },
                },
                "查看课程"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "info",
                    size: "small",
                  },
                  style: {
                    marginLeft: "5px",
                  },
                  on: {
                    click: () => {
                      this.$Modal.confirm({
                        title: "删除提示",
                        content: "是否删除" + params.row.coachName + "教练",
                        onOk: () => {
                          axios.post("/api/gym/coach/updataCoach", {
                            coachId: params.row.coachId,
                            isShow: 0,
                          }).then(res => {
                            if(res.data.status == 200){
                              this.pageNo = 1
                              this.getCoachPage()
                            }
                          });
                        },
                      });
                    },
                  },
                },
                "删除"
              ),
            ]);
          },
        },
      ],
      pageNo: 1,
      coachName: "",
      coachPhone: "",
      coachSex: "",
      detailModal: false,
      addModal: false,
      coachList: [],
      addCoachName: "",
      addCoachSex: "",
      addCoachPhone: "",
    };
  },
  methods: {
    pageChange(e) {
      this.pageNo = e;
      this.getCoachPage();
    },
    showDetailModal() {
      this.detailModal = true;
    },
    getCoachPage() {
      axios
        .post("/api/gym/coach/getCoachPage", {
          coachName: this.coachName,
          coachSex: this.coachSex,
          coachPhone: this.coachPhone,
          pageNo: this.pageNo,
        })
        .then((res) => {
          this.coachList = res.data.data.records;
          this.total = res.data.data.total;
        });
    },
    showAddModal() {
      this.addModal = true;
    },
    closeAddModal() {
      this.addModal = false;
    },
    addCoach() {
      if (this.checkInfor) {
        axios
          .post("/api/gym/coach/insertCoach", {
            coachName: this.addCoachName,
            coachSex: this.addCoachSex,
            coachPhone: this.addCoachPhone,
          })
          .then((res) => {
            this.closeAddModal();
            this.getCoachPage();
          });
      }
    },
    checkInfor() {
      if (
        this.addCoachName != "" &&
        this.addCoachSex != "" &&
        this.addCoachPhone != ""
      ) {
        return true;
      } else {
        this.$Message.error("请填写完整");
        return false;
      }
    },
  },
};
</script>

<style>
.filter {
  display: flex;
  flex-wrap: wrap;
}
.filter-item {
  margin-left: 20px;
  margin-top: 10px;
  display: inline;
}
</style>
